<template>
  <el-breadcrumb separator="/" id="breadcrumb">
    <el-breadcrumb-item :to="{ path: '/home/log' }">系统监控</el-breadcrumb-item>
    <el-breadcrumb-item>服务器状态</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row :gutter="20">
    <el-col :span="8" >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>CPU</span>
          </div>
        </template>
        <div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>CPU</div>
            <div>{{ info.cpu.title }}</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>数量</div>
            <div>{{ info.cpu.cpuCores }}个</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>CPU架构</div>
            <div>{{ info.cpu.arch }}</div>
          </div>
        </div>
<!--        {{当前时间：{{nowTime}}}}-->
        <template #footer></template>
      </el-card>
    </el-col>



    <el-col :span="8" >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>内存</span>
          </div>
        </template>
        <div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>总内存</div>
            <div>{{ info.menm.totalmem }}Kb</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>使用内存</div>
            <div>{{ info.menm.freemem }}Kb</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>Node版本</div>
            <div>{{ info.menm.nodeVersion }}</div>
          </div>
        </div>
        <template #footer></template>
      </el-card>
    </el-col>

    <el-col :span="8" >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>服务器</span>
          </div>
        </template>
        <div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>主机名</div>
            <div>{{ info.server.hostname }}</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>系统</div>
            <div>{{ info.server.platform }}</div>
          </div>
          <div class="wos-flex wos-flex-row wos-flex-between line">
            <div>版本号</div>
            <div>{{ info.server.release }}</div>
          </div>
        </div>
        <template #footer></template>
      </el-card>
    </el-col>
  </el-row>
  <div style="height: 20px;width: 100%"></div>



</template>

<script setup lang="ts">

import {ref, onBeforeMount} from 'vue'
import {serverInfo} from "@/api/system/monitor-server.ts";

let nowTime:any = ref('')
let info = ref({
  "cpu": {
    "title": "",
    "cpuCores": 0,
    "arch": ""
  },
  "menm": {
    "totalmem": 0,
    "freemem": 0,
    "nodeVersion": ""
  },
  "server": {
    "hostname": "",
    "platform": "",
    "release": ""
  }
})
// info = serverInfo()
onBeforeMount(async () => {
  info.value = await serverInfo()
  nowTime.value = new Date().toLocaleString()
})
//数据初始化


</script>
<style scoped lang="scss">
.content {
  padding-top: 20px;
}

.line {
  border-bottom: 1px solid #d5d5d5;
  padding: 10px 10px;
  cursor: pointer;
}
.pl div{
  padding: 10px 10px;
  border-bottom: 1px solid #d5d5d5;
  cursor: pointer;
  width: 14.2%;
}
.line:hover {
  background-color: #d5d5d5;
  border-radius: 5px;
}
</style>